<div id="pm_settings">
    <div class="settings">

        <div class="row pm_grid">

            <section class="pm_form col-1-2">
                <header-block class="settingsAccount-header-identity">
                    <h2
                        class="settingsAccount-title-identity"
                        translate
                        translate-comment="Account page heading"
                        translate-context="Title">Identity</h2>
                </header-block>
                <identity-section></identity-section>
            </section>

            <section class="pm_form col-1-2">
                <header-block class="settingsAccount-header-notifications">
                    <h2
                        class="settingsAccount-title-notifications"
                        translate
                        translate-comment="notifications heading on account page"
                        translate-context="Title">Notifications</h2>
                </header-block>


                <form method="post" class="margin-bottom" ng-submit="noticeForm.$valid && saveNotification(noticeForm)" name="noticeForm" novalidate>
                    <div>
                        <div class="col-3-8">
                            <label for="notificationEmail" translate-context="Title" translate translate-comment="form label for setting reset email">Reset/notification email</label>
                        </div>
                        <div class="col-5-8">
                            <input class="margin" type="email" autocomplete="off" id="notificationEmail" name="notificationEmail"
                            placeholder-translate-context="Placeholder"
                            placeholder-translate="Notification email" ng-model="notificationEmail" />
                            <div ng-messages="noticeForm.notificationEmail.$error">
                                <p class="text-red" ng-message="email" translate-context="Error" translate>The email address is invalid</p>
                            </div>
                            <p class="help-block" translate-context="Info" translate>Also used to reset a forgotten password.</p>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="col-3-8 notMobile">&nbsp;</div>
                        <div class="col-5-8">
                            <button class="pm_button primary disabled-if-network-activity" type="submit" translate-context="Action" translate>Save</button>
                        </div>
                    </div>
                </form>

                <div class="clearfix">
                    <div class="col-3-8">
                        <span class="label" id="passwordResetDescAria" translate-context="Title" translate translate-comment="form label for enabling/disabling reset email">Allow password reset</span>
                    </div>
                    <div class="col-5-8">
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-model="passwordReset" data-custom-ng-value="1" data-custom-ng-change="savePasswordReset()" data-custom-aria-describedby="passwordResetDescAria"></custom-radio>
                                <span translate-context="Action" translate>Enabled</span>
                            </label>
                        </div>
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-model="passwordReset" data-custom-ng-value="0" data-custom-ng-change="savePasswordReset()" data-custom-aria-describedby="passwordResetDescAria"></custom-radio>
                                <span translate-context="Action" translate>Disabled</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="clearfix notMobile">&nbsp;</div>
                <div class="clearfix">
                    <div class="col-3-8">
                        <span class="label">
                            <span translate-context="Title" translate translate-comment="form heading for changing notification settings" id="dailyNotificationsDescAria">Daily email notifications</span>
                            <i class="fa fa-info-circle text-purple" pt-tooltip-translate="When notifications are enabled, we'll send an alert to your recovery/notification address if you have new messages in your ProtonMail account." pt-tooltip-translate-context="Tooltip to explain daily email notifications"></i>
                        </span>
                    </div>
                    <div class="col-5-8">
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-model="dailyNotifications" data-custom-name="dailyNotifications" data-custom-ng-value="1" data-custom-ng-change="saveDailyNotifications()" data-custom-aria-describedby="dailyNotificationsDescAria"></custom-radio>
                                <span translate-context="Action" translate translate-comment="notification settings option">Enabled</span>
                            </label>
                        </div>
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-model="dailyNotifications" data-custom-name="dailyNotifications" data-custom-ng-value="0" data-custom-ng-change="saveDailyNotifications()" data-custom-aria-describedby="dailyNotificationsDescAria"></custom-radio>
                                <span translate-context="Action" translate translate-comment="notification settings option">Disabled</span>
                            </label>
                        </div>
                        <p>
                            <a href="https://protonmail.com/blog/notification-emails/" target="_blank" class="pm_button link" translate-context="Link" translate>Learn more</a>
                        </p>
                    </div>
                </div>
                <div class="clearfix notMobile">&nbsp;</div>
                <div class="clearfix">
                    <div class="col-3-8 margin-top">
                        <label translate-context="Title" translate translate-comment="form heading for changing desktop notifications">Desktop notifications</label>
                    </div>
                    <div class="col-5-8">
                        <p class="alert alert-info no-margin" ng-show="desktopNotificationsStatus === 'granted'">
                            <span translate translate-context="Info">Desktop notifications are currently <strong>enabled</strong>.
                            </span>
                            <br />
                            <a
                                href="#"
                                ng-click="testDesktopNotification()"
                                translate
                                translate-context="Action">Test notification</a>
                        </p>

                        <p class="alert alert-info no-margin" ng-show="desktopNotificationsStatus === 'denied'" translate translate-context="Info">Desktop notifications are currently <strong>disabled</strong>. To enable them, you need to go to your browser settings.</p>

                        <p class="alert alert-info " ng-show="desktopNotificationsStatus === 'default'"><span translate-context="To enable desktop notifications, click here" translate>To enable desktop notifications,</span> <a href="#" ng-click="enableDesktopNotifications()" translate translate-context="Action">click here</a>.</p>
                        <p>
                            <a href="https://protonmail.com/support/knowledge-base/desktop-notifications/" target="_blank" class="pm_button link" translation-comment="link to learn more about desktop notifications" translate-context="Action" translate>What is this?</a>
                        </p>
                    </div>
                </div>
            </section>

        </div><!--/.row-->

        <div class="row pm_grid">

            <section class="pm_form col-1-2" ng-show="passwordMode === 2">
                <header-block class="settingsAccount-header-login">
                    <h2
                        class="settingsAccount-title-login"
                        translate
                        translate-comment="change login password heading"
                        translate-context="Title">Login password</h2>
                </header-block>

                <p>
                    <button type="button" class="pm_button" ng-click="changePassword('login', 0)" translate-context="Action" translate>Change login password</button>
                </p>
                <p>
                    <button type="button" ng-click="changePassword('password', 0)" class="pm_button" translate-context="Action" translate>Switch to one-password mode</button>
                    <a href="https://protonmail.com/support/knowledge-base/single-password/" target="_blank" class="pm_button link" translate-context="Link" translate>Learn more</a>
                </p>
            </section>

            <section class="pm_form col-1-2" ng-show="passwordMode === 2">
                <header-block class="settingsAccount-header-mailbox">
                    <h2
                        class="settingsAccount-title-mailbox"
                        translate
                        translate-comment="form heading for changing mailbox password"
                        translate-context="Title">Mailbox password</h2>
                </header-block>

                <p>
                    <button type="button" class="pm_button" ng-click="changePassword('mailbox', 0)" translate-context="Action" translate>Change mailbox password</button>
                </p>
            </section>

            <section class="pm_form col-1-2" ng-show="passwordMode === 1">
                <header-block class="settingsAccount-header-password">
                    <h2
                        class="settingsAccount-title-password"
                        translate
                        translate-comment="form heading for changing single password"
                        translate-context="Title">Password</h2>
                </header-block>
                <p>
                    <button type="button" class="pm_button" ng-click="changePassword('password', 0)" translate-context="Action" translate>Change password</button>
                </p>
                <p>
                    <button type="button" ng-click="changePassword('login', 1)" class="pm_button" translate-context="Action" translate-comment="switch to two-password mode" translate>Switch to two-password mode</button>
                    <a href="https://protonmail.com/support/knowledge-base/single-password/" target="_blank" class="pm_button link" translate-context="Link" translate>Learn more</a>
                </p>
            </section>

        </div><!--/.row-->

        <div class="row pm_grid">
            <section class="pm_form col-1-2 onmobile-mb-30p">
                <header-block class="settingsAccount-header-language">
                    <h2
                        class="settingsAccount-title-language"
                        translate
                        translate-context="Title">Language</h2>
                </header-block>
                <label for="selectDefaultLanguage" translate translate-comment="form option"             translate-context="Title">Choose your default language.</label>
                <span class="pm_select inline">
                    <select id="selectDefaultLanguage" ng-model="locale" ng-options="locale.label for locale in locales" ng-change="saveDefaultLanguage()"></select>
                    <i class="fa fa-angle-down"></i>
                </span>
            </section>

            <section class="pm_form col-1-2">
                <header-block class="settingsAccount-header-contacts">
                    <h2
                        class="settingsAccount-title-contacts"
                        translate
                        translate-comment="Section heading"
                        translate-context="Title">Automatically save contacts</h2>
                </header-block>
                <div class="clearfix">
                    <div class="col-3-8">
                        <span class="label" id="autosaveContactsDescAria" translate-context="Title" translate-comment="Settings/Account page form heading for enabling or disabling autosave contacts" translate>Automatically save contacts</span>
                    </div>
                    <div class="col-5-8">
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-model="autosaveContacts" data-custom-ng-value="1" data-custom-ng-change="saveAutosaveContacts()" data-custom-aria-describedby="autosaveContactsDescAria"></custom-radio>
                                <span
                                    translate
                                    translate-context="Address state badge"
                                    translate-comment="form option">Enabled</span>
                            </label>
                        </div>
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-model="autosaveContacts" data-custom-ng-value="0" data-custom-ng-change="saveAutosaveContacts()" data-custom-aria-describedby="autosaveContactsDescAria"></custom-radio>
                                <span
                                    translate
                                    translate-context="Address state badge"
                                    translate-comment="form option">Disabled</span>
                            </label>
                        </div>
                        <p>
                            <a href="https://protonmail.com/support/knowledge-base/autosave-contact-list" target="_blank" class="pm_button link" translate-context="Link" translate>Learn more</a>
                        </p>
                    </div>
                </div>
            </section>
        </div><!--/.row-->

        <div class="row pm_grid">
            <section class="pm_form col-1-2">
                <header-block class="settingsAccount-header-email">
                    <h2
                        class="settingsAccount-title-email"
                        translate
                        translate-context="Title">Email Content</h2>
                </header-block>

                <div class="clearfix">
                    <div class="col-3-8">
                        <span id="saveImagesDescAria" class="control-label label" translate-context="Title" translate>Load remote content</span>
                    </div>
                    <div class="col-5-8">
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-change="saveImages()" data-custom-ng-model="images" data-custom-ng-value="1" data-custom-aria-describedby="saveImagesDescAria"></custom-radio>
                                <span translate-comment="form option" translate-context="Action" translate>Auto</span>
                            </label>
                        </div>
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-change="saveImages()" data-custom-ng-model="images" data-custom-ng-value="0" data-custom-aria-describedby="saveImagesDescAria"></custom-radio>
                                <span translate-comment="form option" translate-context="Action" translate>Manual</span>
                            </label>
                        </div>
                        <p>
                            <a target="_blank" href="https://protonmail.com/support/knowledge-base/images-by-default/" class="pm_button link" translate-context="Link" translate>Learn more</a>
                        </p>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="col-3-8">
                        <span id="saveEmbeddedDescAria" class="control-label label" translate-context="Title" translate>Load embedded images</span>
                    </div>
                    <div class="col-5-8">
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-change="saveEmbedded()" data-custom-ng-model="embedded" data-custom-ng-value="2" data-custom-aria-describedby="saveEmbeddedDescAria"></custom-radio>
                                <span translate-comment="form option" translate-context="Action" translate>Auto</span>
                            </label>
                        </div>
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-change="saveEmbedded()" data-custom-ng-model="embedded" data-custom-ng-value="0" data-custom-aria-describedby="saveEmbeddedDescAria"></custom-radio>
                                <span translate-comment="form option" translate-context="Action" translate>Manual</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="col-3-8">
                        <span id="saveRequestLinkDescAria" class="control-label label" translate-context="Title" translate>Request link confirmation</span>
                    </div>
                    <div class="col-5-8">
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-change="saveRequestLink()" data-custom-ng-model="requestLink" data-custom-ng-value="0" data-custom-aria-describedby="saveRequestLinkDescAria"></custom-radio>
                                <span translate-comment="form option" translate-context="Action" translate>Disabled</span>
                            </label>
                        </div>
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-change="saveRequestLink()" data-custom-ng-model="requestLink" data-custom-ng-value="1" data-custom-aria-describedby="saveRequestLinkDescAria"></custom-radio>
                                <span translate-comment="form option" translate-context="Action" translate>Enabled</span>
                            </label>
                        </div>
                    </div>
                </div>
            </section>
            <section class="pm_form col-1-2">
                <header-block class="settingsAccount-header-keyboard">
                    <h2
                        class="settingsAccount-title-keyboard"
                        translate
                        translate-context="Title">Keyboard Shortcuts</h2>
                </header-block>

                <div class="pm_grid">
                    <div class="col-3-8">
                        <span id="saveHotkeysDescAria" class="label" translate-context="Title" translate>Keyboard Shortcuts</span>
                    </div>
                    <div class="col-5-8">
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-change="saveHotkeys()" data-custom-ng-model="hotkeys" data-custom-ng-value="1" data-custom-aria-describedby="saveHotkeysDescAria"></custom-radio>
                                <span translate-context="Action" translate>Enabled</span>
                            </label>
                        </div>
                        <div class="col-1-2">
                            <label>
                                <custom-radio data-custom-ng-change="saveHotkeys()" data-custom-ng-model="hotkeys" data-custom-ng-value="0" data-custom-aria-describedby="saveHotkeysDescAria"></custom-radio>
                                <span translate-context="Action" translate>Disabled</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="pm_grid">
                    <div class="col-3-8">&nbsp;</div>
                    <div class="col-5-8">
                        <button class="pm_button" ng-click="openHotkeyModal()" translate translate-context="Action">View Keyboard Shortcuts</button>
                    </div>
                </div>
            </section>
        </div><!--/.row-->

        <div class="row pm_grid">
            <section class="pm_form col-1-2 onmobile-mb-30p" id="addressesPrioritySection">
                <header-block class="settingsAccount-header-addresses-priority">
                    <h2
                        class="settingsAccount-title-addresses-priority"
                        translate
                        translate-context="Title">Address Priority</h2>
                </header-block>
                <addresses-section></addresses-section>
            </section>
            <section class="settingsAccount-subscriptions-section pm_form col-1-2" ng-if="!isMember">
                <moz-info></moz-info>
                <header-block class="settingsAccount-header-subscriptions">
                    <h2
                        class="settingsAccount-title-subscriptions"
                        translate
                        translate-context="Title">Email Subscriptions</h2>
                </header-block>
                <label class="settingsAccount-subscriptions-label">
                    <custom-checkbox data-custom-ng-model="emailing.announcements" data-custom-ng-change="changeEmailing()"></custom-checkbox>
                    <span translate-context="Label" translate>Major Announcements (2-3 per year)</span>
                </label>
                <label class="settingsAccount-subscriptions-label">
                    <custom-checkbox data-custom-ng-model="emailing.features" data-custom-ng-change="changeEmailing()"></custom-checkbox>
                    <span translate-context="Label" translate>Major New Features (3-4 per year)</span>
                </label>
                <label class="settingsAccount-subscriptions-label">
                    <custom-checkbox data-custom-ng-model="emailing.newsletter" data-custom-ng-change="changeEmailing()"></custom-checkbox>
                    <span translate-context="Label" translate>Proton Newsletter (5-6 per year)</span>
                </label>
                <label class="settingsAccount-subscriptions-label">
                    <custom-checkbox data-custom-ng-model="emailing.beta" data-custom-ng-change="changeEmailing()"></custom-checkbox>
                    <span translate-context="Label" translate>Proton Beta (~ 10-12 per year)</span>
                </label>
            </section>
        </div><!--/.row-->

        <div class="row pm_grid">
            <section class="pm_form col-1-2">
                <header-block class="settingsAccount-header-search">
                    <h2
                    class="settingsAccount-title-search"
                    translate
                    translate-comment="Section heading"
                    translate-context="Title">Search</h2>
                </header-block>
                <wildcard-checkbox></wildcard-checkbox>
            </section>
            <section class="settingsAccount-delete-section pm_form col-1-2" ng-if="!isMember">
                <moz-info></moz-info>
                <header-block class="settingsAccount-header-delete">
                    <h2
                        class="settingsAccount-title-delete"
                        translate
                        translate-context="Title">Delete Account</h2>
                </header-block>
                <button class="settingsAccount-delete-button pm_button error" ng-click="deleteAccount()" translate-context="Action" translate>Delete your account</button>
            </section>
        </div><!--/.row-->
    </div>
</div>
